<template>
  <div class="container">
    <el-row>
      <el-col :span="2">
        <span class="blogTitle" style="font-size: 20px;font-weight: bolder; color: #fff;">myblog</span>
      </el-col>
      <el-col :span="22">
        <!-- 导航菜单 -->
        <span class="nav-bar">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#2F4056"
            text-color="#fff"
            active-text-color="#ffd04b">
            <el-menu-item index="1">首页</el-menu-item>
            <el-menu-item index="2">文章</el-menu-item>
            <el-menu-item index="3">专题</el-menu-item>
            <el-menu-item index="4">关于我</el-menu-item>
          </el-menu>
        </span>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  components: {
  },
  name: 'FrontHeadBar',
  data() {
    return {
      activeIndex: '1',
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      this.activeIndex = key;
      this.$emit('headCall',key)
    }
  },
  mounted() {

  },
  computed: {

  }
}
</script>

<style scoped lang="scss">
  .container {
    .blogTitle {
      float: left;
      margin-top: 16px;
      color: white;
    }
    .nav-bar {
      float: left;
    }
  }
</style>
